<template>
	<view class="wodesss">
		<view class="article-top">
			<view class="article-search">
				<input placeholder-class="placeholder-color" placeholder="商品搜索" v-model="search_text" @input="search()" @confirm="search()" />
				<text class="iconfont iconIcon_search" style="font-size: 50rpx;" @click="search"></text>
			</view>
		</view>
		<view class="list-cate">
			<view v-for="(item,statusIndex) in statusList" :key="statusIndex" @click="ontabtap(item.id)" :data-current="statusIndex" :id="item.id":class="{'selected':item.id==status}" >
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="wodesss_body">
			<mescroll-uni ref="mescroll" @getData="getData" :top="210">
				<block slot="list">
					<block v-if="dataList.length">
						<view class="wodesss_body_sad" v-for="(item,index) in dataList" :key="index">
							<view class="wodesss_list">
								<text class="wodesss_list_sj">{{$util.timeStampTurnTime(item.enter_time).toString().substring(0,11)}}</text>
								<text class="wodesss_list_chen">{{item.status_name}}</text>
								<view class="wodesss_list_i"></view>
								<image class="wodesss_list_img" :src="item.sku_image ? $util.img(item.sku_image.split(',')[0]) : $util.getDefaultImage().default_headimg" mode=""></image>
								<text class="wodesss_list_wenzi">
									{{item.sku_name}}
								</text>
								<view class="wodesss_list_block">
									<view><image src="../../../static/pintuan.png" mode=""></view>
									{{item.pintuan_num}}人团
								</view>
								<view class="wodesss_list_qian">¥<text class="price">{{ item.pintuan_price }}</text></view>
								<text class="wodesss_list_img_w">批发价</text>
								<view class="wodesss_list_qian">¥<text class="prices">{{ item.brokerage }}</text></view>
								<text class="wodesss_list_img_w1">返佣</text>
								<view class="wodesss_list_idya"></view>
								<button class="btn1" type="default" @click="pintuan_manage(item.pintuan_id)">批发管理</button>
								<button class="btn2" type="default" v-if="item.status == 1" @click="openSharePopup(item)">批发分享</button>
							</view>
							
						</view>
					</block>
					<block v-else>
						<ns-empty text="暂无数据" :isIndex="!1"></ns-empty>
					</block>
				</block>
			</mescroll-uni>
		</view>
		
		<!-- 海报 -->
		<view @touchmove.prevent.stop>
			<uni-popup ref="posterPopup" type="bottom" class="poster-layer" :maskClick="false">
				<template v-if="poster != '-1'">
					<view :style="{ height: posterHeight > 0 ? posterHeight + 80 + 'px' : '' }">
						<view class="image-wrap"><image :src="$util.img(poster)  + '?math=' + Math.random()" :style="{ height: posterHeight > 0 ? posterHeight + 'px' : '' }" /></view>
						<!-- #ifdef MP || APP-PLUS -->
						<view class="save" @click="saveGoodsPoster()">保存图片</view>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class="save">保存分享给其他用户</view>
						<!-- #endif -->
					</view>
					<view class="close iconfont iconclose" @click="closePosterPopup()"></view>
				</template>
				<view v-else class="msg">{{ posterMsg }}</view>
			</uni-popup>
		</view>
		<!-- 分享弹窗 -->
		<view @touchmove.prevent.stop>
			<uni-popup ref="sharePopup" type="bottom" class="share-popup">
				<view>
					<view class="share-title">分享</view>
					<view class="share-content">
						<!-- #ifdef MP -->
						<view class="share-box">
							<button class="share-btn" :plain="true" open-type="share">
								<view class="iconfont iconiconfenxianggeihaoyou"></view>
								<text>分享给好友</text>
							</button>
						</view>
						<!-- #endif -->
						<view class="share-box" @click="openPosterPopup">
							<button class="share-btn" :plain="true">
								<view class="iconfont iconpengyouquan"></view>
								<text>生成分享海报</text>
							</button>
						</view>
					</view>
					<view class="share-footer" @click="closeSharePopup"><text>取消分享</text></view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				keywords: '',
				search_text:"",
				statusList:[{
						name: '全部',
						id: ''
					},
					{
						name:'未开始',
						id: '0'
					},
					{
						name:'进行中',
						id: '1'
					},
					{
						name: '已结束',
						id: '2'
					},
				
				],
				status:'', //选中状态
				dataList: [],
				// mescroll: null,
				poster: "-1", //海报
				posterMsg: "", //海报错误信息
				posterHeight: 0,
				memberId: 0,
				currentItem: {},
			}
		},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
			this.getMemberId();
		},
		methods: {
			// #ifdef MP || APP-PLUS
			//小程序中保存海报
			saveGoodsPoster() {
			
				let url = this.$util.img(this.poster);
				// this.$util.showToast({
				// 	title: "saveGoodsPoster:"+ url
				// });
				uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									this.$util.showToast({
										title: "保存成功"
									});
								},
								fail: () => {
									this.$util.showToast({
										title: "保存失败，请稍后重试"
									});
								}
							});
						}
					},
			
					fail: (e) => {
						// this.$util.showToast({
						// 	title: "fail:" + JSON.stringify(e)
						// });
					}
				});
			},
			// #endif
			getData(mescroll) {
				this.mescroll = mescroll;
				this.$api.sendRequest({
					url: '/platformpintuan/api/pintuanbidding/pintuanpage',
					data: {
						page_size: mescroll.size,
						page: mescroll.num,
						status: this.status,
						keywords: this.keywords,
					},
					success: res => {
						let newArr = []
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							})
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.dataList = []; //如果是第一页需手动制空列表
						this.dataList = this.dataList.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			// tab切换,改变筛选条件
			ontabtap(e) {
				this.status=e;
			
				this.$refs.mescroll.refresh();
			},
			search() {
			this.keywords=this.search_text
			this.$refs.mescroll.refresh();
			},
			pintuan_manage(e) {
				this.$util.redirectTo("/promotionpages/platformpintuan/pintuan_manage/pintuan_manage?pintuan_id="+e);
			},
			pintuan_share() {
				console.log('点击实现分享事件')
			},
			// 打开分享弹出层
			openSharePopup(item) {
				this.currentItem = item;
				this.$refs.sharePopup.open();
			},
			// 关闭分享弹出层
			closeSharePopup() {
				this.$refs.sharePopup.close();
			},
			// 打开海报弹出层
			openPosterPopup() {
				this.getGoodsPoster();
				this.$refs.sharePopup.close();
				this.$refs.posterPopup.open();
				if (this.poster != '-1') {
					setTimeout(() => {
						let view = uni.createSelectorQuery().in(this).select(".poster-layer .image-wrap");
						view.fields({
							size: true,
						}, data => {
							let posterWhith = data.width;
							let ratio = parseFloat((740 / posterWhith).toFixed(2));
							if (this.token != '') {
								this.posterHeight = parseInt(1100 / ratio);
							} else {
								this.posterHeight = parseInt(1100 / ratio);
							}
						}).exec();
					}, 100);
				}
			},
			// 关闭海报弹出层
			closePosterPopup() {
				this.poster = '';
				this.$refs.posterPopup.close();
			},
			getMemberId() {
				this.$api.sendRequest({
					url: "/api/member/id",
					success: res => {
						if (res.code >= 0) {
							this.memberId = res.data;
							//this.setWechatShare(); //这里先不使用，到时候需要修改再写分享。
						}
					}
				});
			},
			//生成海报
			getGoodsPoster() {
				//活动海报信息
				let qrcode_param = {
					sku_id: this.currentItem.sku_id,
					id: this.currentItem.id,
				};
				
				if (this.memberId) {
					//qrcode_param.source_member = this.memberId;
					qrcode_param.pintuan_trader_id = this.memberId;
				}
				this.$api.sendRequest({
					url: "/platformpintuan/api/goods/poster",
					data: {
						page: '/promotionpages/platformpintuan/detail/detail',
						qrcode_param: JSON.stringify(qrcode_param),
						// #ifdef APP-PLUS
						app_type: 'h5',
						app_type_name: 'H5',
						// #endif
					},
					success: res => {
						if (res.code == 0) {
							this.poster = res.data.path;
						} else {
							this.posterMsg = res.message;
						}
					}
				});
			},
			/**
			 * 自定义分享内容
			 * @param {Object} res
			 */
			onShareAppMessage(res) {
				var path = '/promotionpages/platformpintuan/detail/detail?id=' + this.currentItem.id + '&pintuan_trader_id=' + this.currentItem.pintuan_trader_id;
				if (this.memberId) path += '&source_member=' + this.memberId;
				return {
					title: this.currentItem.sku_name,
					imageUrl: this.$util.img(this.currentItem.sku_image.split(',')[0], { size: 'big' }),
					path: path,
					success: res => {
						console.log('success');
						console.log()
					},
					fail: res => {}
				};
			},
			/**
			 * 设置微信公众号分享
			 */
			setWechatShare(){
				// 微信公众号分享
				// #ifdef H5
				if (this.$util.isWeiXin()) {
					this.$api.sendRequest({
						url: '/wechat/api/wechat/share',
						data : {
							url: window.location.href
						},
						success: res => {
							if (res.code == 0) {
								var wxJS = new Weixin();
								wxJS.init(res.data.jssdk_config);
								
								let shareConfig = res.data.share_config,
									url = this.$config.h5Domain + '/promotionpages/pintuan/detail/detail?id=' + this.id + '&group_id=' + this.groupId;
									if (this.memberId) url += '&source_member=' + this.memberId;
							
								wxJS.setShareData({
									title: this.goodsSkuDetail.sku_name,
									desc: '拼团价' + '：' + this.$lang('common.currencySymbol') + this.goodsSkuDetail.show_price + '\r\n' + shareConfig.goods_param_2 + '\r\n' + '收藏热度：★★★★★',
									link: url,
									imgUrl: this.$util.img(this.goodsSkuDetail.sku_image, { size: 'big' })
								})
							}
						}
					})
				}
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.wodesss {
		font-family: PingFang-SC-Medium;

		.article-top {
			width: 100%;
			background-color: #FFFFFF;
			padding: 2rpx 32rpx 20rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.article-add-brand {
				width: 152rpx;
				height: 72rpx;

				button {
					width: 152rpx;
					height: 72rpx;
					margin: 0;
					padding: 0;
					border-radius: 36rpx;
					text-align: center;
					line-height: 72rpx;
					background-color: rgba(67, 133, 255, .1);
					color: #4385FF;
				}
			}

			.article-search {
				width: 100%;
				height: 72rpx;
				//background-color: #000;
				background-color: #F8F8F8;
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				border-radius: 36rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				text {
					color: #cccccc;
					font-size: 30rpx;
					margin-left: 16rpx;
				}

				input {
					flex: 1;
					font-size: 28rpx;
				}

				.placeholder-color {
					color: #cccccc;
				}
			}
		}


		.list-cate {
			width: 100%;
			border-bottom: 1rpx solid #EEEEEE;
			padding: 34rpx 30rpx 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #FFFFFF;

			view {
				height: 60rpx;

				text {
					font-size: 30rpx;
					line-height: 1;
					vertical-align: top;
					color: #303133;
				}
				border-bottom: 4rpx solid #ffffff;

				&.selected {
					border-bottom: 4rpx solid #FF4544;

					text {
						color: #FF4544;
					}
				}
			}
		}

		.wodesss_body {
			margin: 0 30rpx 0 30rpx;

			.wodesss_body_sad {
				margin-top: 40rpx;

				.wodesss_list {
					padding-top: 20rpx;
					margin: 0 28rpx 0 32rpx;
					background-color: #FFFFFF;
					height: 454rpx;
					position: relative;
					display: flex;

					.wodesss_list_sj {
						font-weight: 500;
						margin: 0 0 0 31rpx;
						font-size: 28rpx;
					}

					.wodesss_list_chen {
						position: absolute;
						right: 31rpx;
						color: #FF4544;
						display: inline-block;
					}

					.wodesss_list_i {
						width: 91%;

						position: absolute;
						top: 92rpx;
						left: 30rpx;
						height: 2rpx;
						background-color: #EEEEEE;
					}

					.wodesss_list_img {
						flex-direction: row;
						width: 182rpx;
						height: 182rpx;
						//background-color: red;
						border-radius: 20rpx;
						position: absolute;
						top: 130rpx;
						left: 32rpx;
					}

					.wodesss_list_wenzi {
						width: 428rpx;
						height: 68rpx;
						display: flex;
						position: absolute;
						top: 132rpx;
						left: 234rpx;
						display: inline-block;
						line-height: 1;
					}

					.wodesss_list_block {

						//height: 30rpx;
						color: #FF4544;
						border: 2rpx solid #FF4544;
						position: absolute;
						top: 218rpx;
						left: 230rpx;
						text-align: center;
						line-height: 30rpx;
						border-radius: 6rpx;
						
						view {
							display: inline-block;
							width: 30rpx;
							line-height: 30rpx;
							height: 100%;
							background-color: #FF4544;
							padding:6rpx 6rpx;
							margin-right: 6rpx;
							image {
								width: 24rpx;
								height: 24rpx;
							}
						}
						
					}

					.wodesss_list_wu {
						font-weight: 500;
						height: 34rpx;
						color: #FF4544;
						border: 2rpx solid #FF4544;
						position: absolute;
						top: 218rpx;
						left: 384rpx;
						text-align: center;
						line-height: 36rpx;
					}

					.wodesss_list_qian {
						height: 24rpx;
						color: #FF4544;
						position: absolute;
						top: 278rpx;
						left: 234rpx;
						font-size: 24rpx;
						.price {
							padding-left: 10rpx;
							font-size: 32rpx;
						}
						.prices {
							padding-left: 280rpx;
							font-size: 32rpx;
						}
					}

					.wodesss_list_img_w {
						// width: 82rpx;
						height: 24rpx;
						background-color: #FF4544;
						line-height: 24rpx;
						color: #ffffff;
						position: absolute;
						padding: 3rpx 3rpx;
						top: 292rpx;
						left: 360rpx;
						font-size: 24rpx;
						border-radius: 5rpx;
					}

					.wodesss_list_img_w1 {
						// width: 82rpx;
						height: 24rpx;
						background-color: #FF4544;
						line-height: 24rpx;
						color: #ffffff;
						position: absolute;
						padding: 3rpx 3rpx;
						top: 292rpx;
						left: 600rpx;
						font-size: 24rpx;
						border-radius: 5rpx;
					}

					.wodesss_list_idya {
						position: absolute;
						top: 355rpx;
						left: 30rpx;
						height: 2rpx;
						background-color: #EEEEEE;
						width: 90%;
					}

					.btn1 {
						//width: 170rpx;
						height: 50rpx;
						border-radius: 50rpx;
						background-color: #FF4544;
						line-height: 52rpx;
						color: #FFFFFF;
						position: absolute;
						top: 378rpx;
						right: -18rpx;
						font-size: 24rpx;
					}
					.btn2 {
						//width: 170rpx;
						height: 50rpx;
						border-radius: 50rpx;
						background-color: #FF4544;
						line-height: 52rpx;
						color: #FFFFFF;
						position: absolute;
						top: 378rpx;
						right: 126rpx;
						/* #ifdef MP-WEIXIN */
						right: 170rpx;
						/* #endif */
						font-size: 24rpx;
					}
				}
			}
		}
	}
	.share-popup,
	.uni-popup__wrapper-box {
		.share-title {
			line-height: 60rpx;
			font-size: $ns-font-size-lg;
			padding: 15rpx 0;
			text-align: center;
		}
	
		.share-content {
			display: flex;
			display: -webkit-flex;
			-webkit-flex-wrap: wrap;
			-moz-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			-o-flex-wrap: wrap;
			flex-wrap: wrap;
			padding: 15rpx;
	
			.share-box {
				flex: 1;
				text-align: center;
	
				.share-btn {
					margin: 0;
					padding: 0;
					border: none;
					line-height: 1;
					height: auto;
					text {
						margin-top: 20rpx;
						font-size: 24rpx;
						display: block;
						color: $ns-text-color-black;
					}
				}
	
				.iconfont {
					font-size: 80rpx;
					line-height: initial;
				}
				.iconpengyouquan,
				.iconiconfenxianggeihaoyou {
					color: #07c160;
				}
			}
		}
	
		.share-footer {
			height: 90rpx;
			line-height: 90rpx;
			border-top: 2rpx #f5f5f5 solid;
			text-align: center;
			color: #666;
		}
	}
	// 海报
	// .uni-popup__wrapper-box
	.poster-layer {
		.generate-poster {
			padding: 40rpx 0;
			.iconfont {
				font-size: 80rpx;
				color: #07c160;
				line-height: initial;
			}
			> view {
				text-align: center;
				&:last-child {
					margin-top: 20rpx;
				}
			}
		}
		.image-wrap {
			width: 70%;
			margin: 30px auto 20px auto;
			box-shadow: 0 0 16px rgba(100, 100, 100, 0.3);
			image {
				width: 100%;
				height: 100%;
				height: 750rpx;
			}
		}
		.msg {
			padding: 40rpx;
		}
		.save {
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
		}
		.close {
			position: absolute;
			top: 0;
			right: 20rpx;
			width: 40rpx;
			height: 80rpx;
			font-size: 50rpx;
		}
	}
</style>



<style scoped>
	/deep/ .wodesss_body_sad uni-button {
		padding: 0 20rpx !important;
	}
</style>